<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>菜单管理</title>
    <!-- 引入公共样式 -->
	<link rel="stylesheet" href="../../../static/libs/layui/css/layui.css">
	<link rel="stylesheet" href="../../../static/css/commom.css">
	<link rel="stylesheet" href="../../../static/zTree/zTreeStyle/zTreeStyle.css">
	<link rel="stylesheet" href="../../../static/dtree/dtree.css">
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-form toolbar">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label w-auto">搜索：</label>
                            <div class="layui-input-inline mr0">
                                <input id="menuSearch" class="layui-input" type="text" placeholder="输入关键字">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button id="menuBtnSearch" class="layui-btn icon-btn">
                                <i class="layui-icon layui-icon-search"></i>搜索
                            </button>
                            <button id="btnAdd" class="layui-btn icon-btn">
                                <i class="layui-icon layui-icon-add-1"></i>添加
                            </button>
                            <!-- <button id="btnSync" class="layui-btn icon-btn">
                                <i class="layui-icon layui-icon-refresh-1"></i>同步
                            </button> -->
                        </div>
                    </div>
                </div>
                <table id="menuTable" class="layui-table" lay-filter="menuTable"></table>
            </div>
        </div>
    </div>
    <!-- 操作列 -->
    <script type="text/html" id="tableBar">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <!-- 新增项 -->
    <script type="text/html" id="addMenuHtml">
		<form id="addForm" class="layui-form model-form" lay-filter="addForm">
        	<input type="hidden" name="id">
        	<div class="layui-form-item">
            	<label class="layui-form-label required">菜单名称</label>
            	<div class="layui-input-block">
                	<input name="menuName" id="menuName" placeholder="请输入菜单名称" type="text" class="layui-input " maxlength="50"
                    	lay-verify="required" required="">
            	</div>
        	</div>
			<div class="layui-form-item">
				<label class="layui-form-label">上级菜单</label>
				<div class="layui-input-block">
					<select name="parentId" id="parentId" lay-search>
						<option value="-1">顶级菜单</option>
						</option>
					</select>
				</div>
			</div>
        <!--	<div class="layui-form-item">
            	<label class="layui-form-label required">权限标识</label>
            	<div class="layui-input-block">
                	<input name="perms" id="perms" placeholder="请输入权限标识" type="text" class="layui-input" lay-verify="required"/>
            	</div>
        	</div>-->
        	<div class="layui-form-item">
            	<label class="layui-form-label required">菜单url</label>
            	<div class="layui-input-block">
               		<input name="menuUrl" placeholder="请输入菜单url" type="text" class="layui-input" lay-verify="required"/>
            	</div>
        	</div>
            <div class="layui-form-item">
            	<label class="layui-form-label required">排序</label>
            	<div class="layui-input-block">
               		<input name="orderNo" placeholder="请输入菜单url" type="text" class="layui-input" lay-verify="required"/>
            	</div>
        	</div>
        <!--	<div class="layui-form-item">
            	<label class="layui-form-label">菜单图标</label>
            	<div class="layui-input-block">
                    <input name="icon" placeholder="请输入菜单图标" type="text" class="layui-input" />
                    <em class="layui-icon layui-icon-set-sm parameter-icon"></em>
            	</div>
        	</div>
        	<div class="layui-form-item">
            	<label class="layui-form-label">菜单类型</label>
            	<div class="layui-input-block" id="menu_type">
                	<input type="radio" name="menu_type" value="4" title="场景"/>
                	<input type="radio" name="menu_type" value="0" title="模块" checked />
                	<input type="radio" name="menu_type" value="1" title="菜单"/>
					<input type="radio" name="menu_type" value="2" title="按钮"/>
					<input type="radio" name="menu_type" value="3" title="按钮组"/>
            	</div>
        	</div>-->
        <!--	<div class="layui-form-item">
            	<label class="layui-form-label">是否管理员专属模块</label>
            	<div class="layui-input-block" id="is_belong_admin">
                	<input type="radio" name="is_belong_admin" value="0" title="否" checked />
                	<input type="radio" name="is_belong_admin" value="1" title="是" />
            	</div>
        	</div>
        	<div class="layui-form-item">
            	<label class="layui-form-label required">排序号</label>
            	<div class="layui-input-block">
                	<input name="rowno" id="rowno" placeholder="请输入排序号" type="number" class="layui-input" lay-verify="required"/>
            	</div>
        	</div>-->
			<div class="layui-form-item layui-hide">
                <input type="button" lay-submit lay-filter="addFormSubmit" id="addFormSubmit" value="确认">
            </div>
    	</form>
    </script>
    <script type="text/html" id="dialogIcon">
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-row">
                        <div class="layui-col-12">
                            <blockquote class="layui-elem-quote">【点击可复制】可选择你想配置的外部图标</blockquote>
                            <textarea id="copyText"></textarea>
                            <ul class="icons layui-row"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>
	<script src="../../../static/js/jquery-1.11.0.min.js"></script>
	<script src="../../../static/libs/layui/layui.js"></script>
	<script src="../../../static/js/common.js"></script>
	<script src="../../../static/zTree/js/jquery.ztree.all.min.js"></script>
	<script src="../../../static/dtree/dtree.js"></script>
    <script>
        layui.config({
            base: '../../../static/layui_ext/'
        }).extend({
            treetable: '../../../static/treetable-lay/treetable'
        }).use(['table', 'laytpl', 'treetable', 'form', 'admin'], function () {
            var $ = layui.jquery;
            var table = layui.table;
            var treetable = layui.treetable;
            var admin = layui.admin;
            var form = layui.form;
            var laytpl = layui.laytpl;

            function renderAuthTable() {
                // 渲染表格
                layer.load(2);
                treetable.render({
                    treeColIndex: 1,
                    treeSpid: -1,
                    treeIdName: 'authorityId',
                    treePidName: 'parentId',
                    treeDefaultClose: false, //默认关闭折叠
                    elem: '#menuTable',
                    //url: '../../../static/json/menus.json',
                    url: '/sysPermissionsController/getMenuList',
                    page: false,
                    cols: [
                        [{
                            type: 'numbers'
                        },
                        {
                            field: 'menuName',
                            minWidth: 200,
                            title: '权限名称'
                        },
                      /*  {
                            field: 'authority',
                            title: '权限标识'
                        },*/
                        {
                            field: 'menuUrl',
                            title: '菜单url'
                        }, {
                            field: 'orderNo',
                            title: '排序'
                        },
                       /* {
                            field: 'menuIcon',
                            width: 80,
                            align: 'center',
                            templet: function (d) {
                                if (d.menu_type == 0) {
                                    return '<span class="layui-badge layui-bg-blue">模块</span>';
                                } else if (d.menu_type == 1) {
                                    return '<span class="layui-badge-rim">菜单</span>';
                                } else if (d.menu_type == 2) {
                                    return '<span class="layui-badge layui-bg-gray">按钮</span>';
                                }else if(d.menu_type == 4){
                                	return '<span class="layui-badge layui-bg-blue">场景</span>';
                                } else {
                                    return '<span class="layui-badge layui-bg-gray">按钮组</span>';
                                }
                                /!* if (d.pk_parent == -1 || !d.pk_parent) {
                                    return '<span class="layui-badge layui-bg-blue">目录</span>';
                                } else {
                                    return '<span class="layui-badge-rim">菜单</span>';
                                } *!/
                            },
                            title: '类型'
                        },*/
                        {
                            templet: '#tableBar',
                            width: 120,
                            align: 'center',
                            title: '操作'
                        }
                        ]
                    ],
                    done: function () {
                        layer.closeAll('loading');
                    }, response: {
                        statusName: 'success' //数据状态的字段名称，默认：code
                        , statusCode: true //成功的状态码，默认：0
                        , msgName: 'msg' //状态信息的字段名称，默认：msg
                        , countName: 'count' //数据总数的字段名称，默认：count
                        , dataName: 'datas' //数据列表的字段名称，默认：data
                    }
                });
            }
            renderAuthTable();
            /* 搜索 */
            $('#menuBtnSearch').on('click', doSearch);
            $(document).keydown(function (event) {
                if (event.keyCode == 13) {
                    doSearch();
                }
            });
            /* 搜索功能 */
            function doSearch() {
                var keyword = $('#menuSearch').val();
                var searchCount = 0;
                $('#menuTable').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
                    $(this).css('background-color', 'transparent');
                    var text = $(this).text();
                    if (keyword != '' && text.indexOf(keyword) >= 0) {
                        $(this).css('background-color', 'rgba(250,230,160,0.5)');
                        if (searchCount == 0) {
                            treetable.expandAll('#menuTable');
                            $('html,body').stop(true);
                            $('html,body').animate({
                                scrollTop: $(this).offset().top - 150
                            }, 500);
                        }
                        searchCount++;
                    }
                });
                if (keyword == '') {
                    layer.msg("请输入搜索内容", {
                        icon: 5
                    });
                } else if (searchCount == 0) {
                    layer.msg("没有匹配结果", {
                        icon: 5
                    });
                }
            }
            /* 添加 */
            $("#btnAdd").click(function () {
                showAddPage();
            })
            // 工具条点击事件
            table.on('tool(menuTable)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                if (layEvent === 'edit') { // 编辑字典项
                    showAddPage(data);
                } else if (layEvent === 'del') { // 删除
                    layer.confirm('确定要删除吗?', {
                        skin: 'layui-admin-skin',
                        shade: [0.1, '#000'],
                    },function (i) {  

                        $.get('/sysPermissionsController/deleteMenu', { 'id': data.id }, function (res) {
                            layer.closeAll('loading');
                            if (res.success) {
                                layer.msg(res.msg, { icon: 1, time: 1000 }, function () {
                                    window.location.reload();
                                });
                            } else {
                                layer.msg(res.msg, { icon: 2, time: 2000 });
                            }
                        }, 'json');
                    })
                }
            });
            /* 显示新增弹窗 */
            function showAddPage(data) {
                layer.open({
                    type: 1,
                    skin: 'layui-admin-skin',
                    title: data ? '编辑' : '新增',
                    shade: [0.1, '#000'],
                    area: ['360px', '500px'],
                    btn: ['确定', '取消'],
                    scrollbar: false,
                    maxmin: true,
                    content: $("#addMenuHtml").html(),
                    success: function (layero, dIndex) {
                        var id = null
                        if (data){
                             id = data.id
                        }
                        //构造父级数据
                        $.ajax({
                            url: '/sysPermissionsController/getMenuListCheck',
                            type: 'post',
                            dataType: 'json',
                            data:{id:id},
                            success: function (result) {
                                var menuList = result.data;
                                var html = '';
                                var pid = '';
                                if (data) {
                                    pid = data.pid;
                                }
                                if (menuList) {
                                    $.each(menuList, function (index, obj) {
                                        html += '<option value="' + obj.authorityId + '" ';
                                        if (data && obj.authorityId == pid) {
                                            html += ' selected ';
                                        }
                                        html += '>' + obj.menuName + '</option>';
                                    })
                                    if (html) {
                                        $('#parentId').append(html);
                                    }
                                }
                                form.render('select');
                            }
                        })
                        if (data && data.is_scene == 1) {//预置场景
                            //$('#menu_name').attr('disabled', 'disabled');
                            //$('#perms').attr('disabled', 'disabled');
                            //$('#menu_type').find('input').attr('disabled','disabled');
                            //$('select').attr('disabled', 'disabled');
                        }
                        // 回显数据
                        form.val('addForm', data);
                        form.render();
                        // $(layero).children('.layui-layer-content').css('overflow', 'visible');
                        // icon点击
                        $(".parameter-icon").click(function () {
                            showIcon();
                        })
                    },
                    yes: function (layero, dIndex) {
                        var url = '/sysPermissionsController/insertMenu';
                        if (data){
                            url = '/sysPermissionsController/updateMenu';
                        }
                        // 表单提交事件
                        form.on('submit(addFormSubmit)', function (data) {
                            layer.load(2);
                            $.get(url, data.field, function (res) {
                                layer.closeAll('loading');
                                if (res.success) {
                                    layer.close(layero);
                                    layer.msg(res.msg, { icon: 1, time: 1000 }, function () {
                                        window.location.reload();
                                    });
                                    //insTb.reload({}, 'data');
                                } else {
                                    layer.msg(res.msg, { icon: 2, time: 2000 });
                                }
                            }, 'json');
                            return false;
                        });
                        $("#addFormSubmit").trigger("click");
                    }
                })
            }
            // icon弹窗显示
            function showIcon() {
                layer.open({
                    type: 1,
                    skin: 'layui-admin-skin-w',
                    title: '复制icon',
                    shade: [0.1, '#000'],
                    btn: ['确定'],
                    area:["100%","100%"],
                    content: $("#dialogIcon").html(),
                    success: function (layero, dIndex) {
                        var iconUrl = '//at.alicdn.com/t/font_157670_u6wws8lumx.css';
                        $.get(iconUrl, function (data) {
                            var iconHtml = '';
                            for (var i = 1; i < data.split(".icon-").length; i++) {
                                iconHtml += "<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1'>" +
                                    "<i class='iconfont icon-" + data.split(".icon-")[i].split(":before")[0] + "'></i>" +
                                    "icon-" + data.split('.icon-')[i].split(':before')[0] +
                                    "</li>";
                            }
                            $(".icons").html(iconHtml);
                            $(".iconsLength").text(data.split(".icon-").length - 1);
                        })
                        $("body").on("click",".icons li",function(){
                            var copyText = document.getElementById("copyText");
                            copyText.innerText = $(this).children("i").attr("class");
                            copyText.select();
                            document.execCommand("copy");
                            layer.msg("复制成功",{anim: 2});
                        })
                    }
                })
            }
        });
    </script>
</body>

</html>